<template>
    <div class="myOrder">
        <ul class="tabs clearfix">
            <a class="tab" :class="{on: num == 0}" @click="clicktab(0)">所有订单</a>
            <a class="tab" :class="{on: num == 1}" @click="clicktab(1)">待支付订单</a>
            <a class="tab" :class="{on: num == 2}" @click="clicktab(2)">已完成订单</a>
        </ul>
        <div class="notdata" v-if="notdata">
            <i class="iconfont">&#xe6be;</i>暂时没有数据
        </div>
        <div class="person_info" v-if="!notdata">
            <div class="order_content" v-for="(item, index) in pageObj.order" :key="index">

                <div class="order_title clearfix">
                    <span class="order_num">订单号：{{item.soid}}</span>
                    <span class="time">下单时间：{{item.order_date}}</span>
                </div>
                <div class="order_body clearfix">
                    <div class="body_left clearfix">
                        <div class="img_box fl" v-if="item.img">
                            <img :src="item.img" alt="">
                        </div>
                        <p class="fl">
                            {{item.goodsname}}
                        </p>
                    </div>
                    <ul class="body_right clearfix">
                        <li class="money">￥{{item.order_pay}}</li>
                        <li v-if="item.payType == 0">微信支付</li>
                        <li v-if="item.payType == 1">支付宝支付</li>
                        <li class="alipay" v-if="item.state == 1">等待支付</li>
                        <li class="alipay" v-if="item.state == 0">已支付</li>
                        <li v-if="item.status == 1">
                            <router-link :to="{name: 'DetailId', params: {id: item.courseId}}" class="go_btn">进入学习</router-link>
                        </li>
                        <li v-else-if="item.state == 1 ">
                            <a class="go_btn go_pay" @click="buyCourse">继续支付</a>
                            <a @click="quxiao(item.id)" class="cancel" style="cursor: pointer">取消支付</a>
                        </li>
                        <li v-else-if="item.state == 0 ">
                            <a class="go_btn go_pay" @click="pinglun(item)">评论</a>
                        </li>
                    </ul>
                </div>
                <!--<el-dialog title="收银台" :visible.sync="dialogFormVisible01" width="700px">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="活动形式">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>-->
                <el-dialog title="收银台" :visible.sync="dialogFormVisible" width="700px">
                    <div data-v-1ee14d65="" class="modal_body" style="width: 100%">

                        <div class="pay_type" style="border-color: #ec7f00;margin-top: 20px">
                            <input type="radio" id="payType2" name="payType" value="1" v-model="payType"
                                   style="margin-left: -370px">
                            <label for="payType2" border="true" class="pay pay_ali"
                                   @click="changePay(1)"></label>

                            <input type="radio" id="payType1" name="payType" value="2" v-model="payType"
                                   style="margin-left: 170px">
                            <label for="payType1" class="pay pay_weixin" @click="changePay(2)"></label>
                        </div>

                    </div>
                    <div data-v-1ee14d65="" class="modal_foot">
                        <button data-v-1ee14d65="" class="solid_btn" @click="submit(item)"
                                style="margin-left: 160px">立即支付
                        </button>
                    </div>
                    <!--                                </div>-->
                </el-dialog>
                            <el-dialog
                                    title="评论"
                                    :visible.sync="dialogFormVisible01"
                                    width="30%"
                                    >
                                <el-form ref="form" :model="comment" label-width="80px">
                                    <el-form-item label="评论">
                                        <el-input v-model="comment.description"></el-input>
                                    </el-form-item>
                                    <el-form-item label="评价">
                                        <el-select v-model="comment.degree" placeholder="请选择评论内容">
                                            <el-option label="好评" value="0"></el-option>
                                            <el-option label="差评" value="1"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-form>

                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible01 = false">取 消</el-button>
                                    <el-button type="primary" @click="insertComment()">确 定</el-button>
                                  </span>
                </el-dialog>
            </div>

            <!--                            微信支付-->
            <el-dialog
                    title="收银台"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <div style="text-align: center">
                    <p>微信支付 {{payResult.price}}元</p>
                    <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                        <vue-qr
                                :text="payResult.codeUrl"
                                :margin="0"
                                colorDark="green"
                                :logoSrc="require('/src/assets/img/wx.jpg')"
                                colorLight="#fff"
                                :size="200">

                        </vue-qr>
                    </div>
                </div>
                <el-divider></el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两小时内有效,请及时扫码支付<br>
                </div>

            </el-dialog>
            <d-page v-if="pageObj.totalPage > 1 && !notdata" :page="pageObj" @btnClick="getPage"></d-page>
        </div>
    </div>

</template>

<script>
    import YSide from '@/components/account/Side'
    import DPage from '@/components/Page'
    import vueQr from 'vue-qr'
    export default {
        name: "MyOrder",

        data () {
            return {
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                payType: '',
                num: 0,
                showPay: false,
                payData: null,
                notdata: false,
                timer1: '',
                dialogVisible: false, //弹出框
                dialogFormVisible: false,
                dialogFormVisible01:false,
                /*dialogFormVisible01:false,*/
                //得到响应的结果
                orderNo:"",
                payResult: {
                    //价格
                    price:0,
                    //二维码路径  借助vue-qr 可以把二维码地址转为二维码图片
                    codeUrl:"",

                    orderNo:"",
                    logoSrc: "/src/assets/img/wx.jpg" //微信二维码中间小logo
                },
                pageObj: {
                    //当前页面--》page
                    pageCurrent: '1',
                    //每页条数--》limit
                    pageSize: '5',
                    //总条数
                    totalCount: '',
                    //total的页数（有几页）【totalCount/pageSize】
                    totalPage: '',
                    state:'',
                    order:[
                        {
                            soid:'',//订单号
                            order_date:'',//订单生成时间
                            goodsname:'',//商品名称
                            img:'',//商品图片
                            sname:'',//店铺名字
                            order_pay:'',//订单总价
                            dprice:'',//商品总价
                            zprice:'',//商品单价
                            tb_quantity:'',//商品数量
                            gid:'',//商品链表的id
                            gid:''
                           /* payType:''//支付方式*/

                        },
                    ],
                    //评论

                },
                comment:{},
            }
        },
        methods: {
            pinglun() {
                console.log(this.pageObj.order)
                this.dialogFormVisible01 = true;
            },
           //发布评论
           insertComment(){
               this.dialogFormVisible01 = false
              console.log(this.comment)
               this.$http.post("/comment/clientComments/insertComment",this.comment).then(res=>{
                   console.log(res)
               })
           },
            pinglun(row){
               console.log(row)
                this.dialogFormVisible01=true
              this.comment.goodsId=row.gid
                this.comment.shopId=row.shop_id

            },

            buyCourse() {

                // alert(this.playStatus)
                if (!this.HuiYuanId) {
                    this.$msgBox({
                        content: '请登录后再购买',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })
                    return
                }
                this.dialogFormVisible = true;

            },
            getOrder() {

            },
            resetPay() {
                this.payStep = 1;
                this.getOrder(this.payType);
            },
            changePay(int) {
                this.getOrder(int);
            },
            queryPayStatus() {
                //继续支付
                var that = this;
                this.$http.post("order/order/queryPayStatus/"+this.orderNo).then(r => {
                    if (r.data.code === 2000) {
                        //如果支付成功，清除定时器
                        clearInterval(that.timer1)
                        that.timer1 = null;
                        that.$message({
                            type: 'success',
                            message: '支付成功!'
                        })
                        that.dialogVisible = false;
                        //刷新界面
                        this.$router.go(0);
                        //跳转到课程详情页面观看视频
                        // that.$router.push({path: '/DetailId/:id' + that.payResult.course_id})
                    }
                })
            },

            //微信下单
            submit(item) {
                //设置一个定时任务，每隔3秒调用一次
                if (this.payType === '2'){
                    var that = this;
                    this.orderNo=item.soid;
                    this.$http.post("/order/order/createNavite/"+this.orderNo).then(function (resp) {
                        // alert(courseId)
                        that.dialogVisible = true
                        if (resp.data.code === 2000) {

                            that.payResult = resp.data.data;
                        } else {
                            that.$message.error("订单已经生成,尚未支付");
                        }
                    })
                    //设置一个定时任务，每隔3秒调用一次
                    this.timer1 = setInterval(() => {
                        this.queryPayStatus(this.payResult.out_trade_no)
                    }, 4000);
                    this.dialogVisible = false;
                }
                //支付宝支付
                else if(this.payType === '1'){

                    var that = this;
                        this.$http.get("/order/alipay/pay?subject=" + item.goodsname +"&traceNo="+ item.soid +"&totalAmount="+item.zprice).then(function (resp) {
                        console.log(resp)
                        // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                        const divForm = document.getElementsByTagName("div");
                        if (divForm.length) {
                            document.body.removeChild(divForm[0]);
                        }
                        const div = document.createElement("div");
                        div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
                        document.body.appendChild(div);
                        document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                        document.forms[0].submit();
                        this.$router.go(0);
                        // that.ZhiFuBaoStatus=resp.data.result.emptyOfEntity;
                        // alert(that.ZhiFuBaoStatus)
                        // this.$http.post("/order/order/updateZhiFuStatus/"+this.classData.id+"/"+this.HuiYuanId).then(function (resp) {
                        // })

                    })
                }

            },
            pay (item) {
                this.payData = item;
                this.showPay = true;
            },
            //头部选择的按钮
            clicktab (int) {
                this.num=int;
                this.pageObj.pageCurrent = 1;
                this.pageObj.pageSize = 5;
                this.pageObj.totalPage='',
                this.getOrderList(int);
            },

            //监听分页的触发
            getPage: function (int) {
                this.pageObj.pageCurrent=int;
                this.initOrderList();
            },

            //订单数据重载，，判断要查询所有还是查询支付或未支付订单
            getOrderList (int) {
                if (int===1){//查询待支付订单
                    this.pageObj.state=1;
                }else if (int===2){//已支付订单
                    this.pageObj.state=0;
                }else if (int===0){//查询所有
                    this.pageObj.state="";
                }
                this.initOrderList()
            },

            //获取订单信息
            initOrderList(){
                this.notdata=false;
              var that=this;
              this.$http.post("/order/orderShop/userOrder02",this.pageObj).then(function (resp) {
                  that.pageObj.order=resp.data.data.records;
                  that.pageObj.totalCount=resp.data.data.total;
                  if (resp.data.data.total===0){
                      that.notdata=true;
                  }
                 that.pageObj.totalPage=Math.ceil(that.pageObj.totalCount/5)
              })
            },

            //取消支付
            quxiao(id){
                this.$confirm(`确定要《《取消支付》》吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that=this;
                    this.$http.post("/order/order/cancelPayment/"+id).then(function (resp) {
                        if (resp.data.code===2000){
                            that.$message.success(resp.data.msg);
                        }else {
                            that.$message.error(resp.data.msg);
                        }
                        that.pageObj.pageCurrent = 1;
                        that.initOrderList();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消支付失败'
                    });
                })



            }

        },
        mounted () {
            this.getOrderList();
        },
        components: {
            YSide,
            DPage,
            vueQr
        }

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .pay {
        width: 200px;
        height: 50px;
        border: 1px solid #fff;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;

        &.pay_ali {
            background-image: url();
            margin-left: 20px;


        }

        &.pay_weixin {
            background-image: url();
            margin-left: 0px;

        }
    }

    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }
    .person_info {
        padding: 25px;
        min-height: 400px;
    }
    .order_content {
        border-bottom: 2px solid rgba(245, 245, 245, 1);
        margin-top: 20px;
        position: relative;
        &:first-child {
            margin-top: 0;
        }
    }
    .order_title {
        line-height: 36px;
        padding-left: 20px;
        background: rgba(245, 245, 245, 1);
        font-size: 14px;
        color: #999;
        .order_type {
            margin-right: 10px;
            color: #0099FF;
        }
        .time {
            margin-left: 30px;
        }
    }
    .order_body {
        margin: 15px 0;
    }
    .body_left {
        padding: 0 20px;
        float: left;
        // position: relative;
        .img_box {
            width: 120px;
            height: 59px;
            display: inline-block;
        }
        img {
            width: 120px;
            height: 59px;
        }
        p {
            // position: absolute;
            width: 336px;
            white-space: inherit;
            margin-left: 10px;
            // left: 160px;
            font-size: 14px;
            color: #999;
        }
    }
    .body_right {
        float: right;
        li {
            float: left;
            height: 59px;
            width: 100px;
            text-align: center;
            border-left: 2px solid rgba(245, 245, 245, 1);
            font-size: 14px;
            color: #999;
            &.alipay {
                color: #0099FF;
            }
            &.money {
                color: #D51423;
            }
            .cancel {
                display: block;
                text-align: center;
                margin-top: 5px;
                color: #999;
                &:hover {
                    color: #D51423;
                }
            }
            .go_btn {
                display: block;
                width: 76px;
                height: 30px;
                margin-left: 10px;
                line-height: 30px;
                background: #fff;
                border-radius: 6px;
                font-size: 14px;
                cursor: pointer;
                color: #999;
                border: 1px solid #999;
                &.go_pay {
                    border-color: orange;
                    color: orange;
                }
                &:hover {
                    color: #D51423;
                    border-color: #D51423;
                }
            }
        }
    }
    .notdata{
        text-align: center;
        padding: 60px 0;
        font-size: 30px;
        color: #999;
        min-height: 400px;
        i{
            font-size: 30px;
            padding-right: 12px;
        }
    }
    .page {
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }
</style>
